<template>
  <!-- main右边内容区宽度自适应 -->
  <div :style="{width:AppMainWidth}" class="app-main-auto-width">
    <slot />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    width: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      appWidth: 'calc(100vw - 240px)'
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    AppMainWidth () {
      if (!this.width) {
        if (!this.sidebar.opened) {
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.appWidth = 'calc(100vw - 130px)'
        } else {
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.appWidth = 'calc(100vw - 300px)'
        }
        return this.appWidth
      } else {
        return this.width
      }
    }
  },
  created () {

  },
  mounted () {
    const self = this
    window.onresize = function () { // 定义窗口大小变更通知事件
      if (!self.sidebar.opened && !self.width) {
        self.appWidth = 'calc(100vw - 60px)'
      }
    }
  },
  methods: {

  }
}
</script>
<style scoped lang="scss">
.app-main-auto-width {
  box-sizing: border-box;
}
</style>

